<template>
  <div>
    <header-bar />
    <div class="content">
      <banner-slide :slides="banners" />
 <div class="home-fast-nav">
        <dl v-for="(item,index) in fastNavArr" :key="index">
          <dt>
            <img :src="item.icon" alt />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>
      <div class="home-day-buy">
        <p>
          <span>
            每日必购
          </span>
          <span>
            大家都在买
          </span>
        </p>
        <img :src="item.url" v-for="(item,index) in dayBuyArr" :key="index">
      </div>
      <div ref="content">
        <md-tab-bar class="tab" :menu="tabMenu" textKey="title" @change="tabChange(index, row)" />
        <md-product-list :products="products" />
      </div>
    </div>
  </div>
</template>

<script>
import HeaderBar from './components/headerBar'
import BannerSlide from './components/bannerSlide'
import scrollBottom from '@/mixins/scroll'
import { offset } from '@/utils/utils'

export default {
  name: 'Home',
  data () {
    return {
      banners: [],
      tabMenu: [],
      products: [],
      fetchParams: {
        page: 1,
        pageSize: 10
      },
      fastNavArr: [
        {
          icon: require("@/assets/img/chao1.png"),
          name: "蔬菜每日鲜"
        },
        {
          icon: require("@/assets/img/chao2.png"),
          name: "肉蛋禽"
        },
        {
          icon: require("@/assets/img/chao3.png"),
          name: "母婴天地"
        },
        {
          icon: require("@/assets/img/chao4.png"),
          name: "进店必买"
        },
        {
          icon: require("@/assets/img/chao5.png"),
          name: "美通卡"
        },
        {
          icon: require("@/assets/img/chao1.png"),
          name: "早晚市"
        },
        {
          icon: require("@/assets/img/chao2.png"),
          name: "品牌汇"
        },
        {
          icon: require("@/assets/img/chao3.png"),
          name: "领券中心"
        },
        {
          icon: require("@/assets/img/chao4.png"),
          name: "支付优惠"
        },
        {
          icon: require("@/assets/img/chao5.png"),
          name: "直采品牌"
        }
      ],
      dayBuyArr:[
        {
          url: require("@/assets/img/1.jpg")
        },
        {
          url: require("@/assets/img/2.jpg")
        },
        {
          url: require("@/assets/img/3.jpg")
        }
      ],
    }
  },
  components: {
    HeaderBar,
    BannerSlide
  },
  mixins: [scrollBottom],
  created () {
    this.initData()
    this.fetchProducts()
  },
  mounted () {
    console.log('当前组件')
  },
  methods: {
    async initData () {
      const bannerData = await this.$api.home.banner()
      const tabmenu = await this.$api.home.tabmenu()
      this.banners = bannerData.data
      this.tabMenu = tabmenu.data
    },
    tabChange (index, row) {
      const top = offset(this.$refs.content).top
      window.scrollTo(0, top)
      this.fetchParams.page = 1
      this.fetchProducts()
      console.log(index,row)
    },
    async fetchProducts () {
      const data = await this.$api.product.list(this.fetchParams)
      if (this.fetchParams.page === 1) {
        this.products = data.data
      } else {
        this.products = this.products.concat(data.data)
      }
    },
    scrollBottom () {
      this.fetchParams.page += 1
      this.fetchProducts()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  position: sticky;
  top:0;
  background: #fff;
  z-index: 1000;
}
 .home-fast-nav {
      font-size: $font-size-s;
      @include flex(row, center, center);
      flex-wrap: wrap;
      dl {
        width: 20%;
        @include flex(column, center, center);
        margin-top: 20px;
      }
       img {
        width:60%;
        height:60%
      }
      dd{
        width:100%;
        text-align: center;
      }
    }
     .home-day-buy{
      @include wh(100%, 400px);
      font-size: $font-size-m;
      margin-top:30px;
      p{
        padding: 20px 0 20px 20px;
        &>span:nth-child(1){
          font-size: $font-size-xl;
          font-weight: 800;
        }
      }
      img{
        width: 33.33%;
        height: 300px;
      }
    }
</style>
